.mainItem {
  transition: all .3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .arrow{
    width: 30px;
    text-align: center;

    svg{
      width: 20px;
      transition: all .3s;
    }
  }

  .head{
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    align-items: center;
    height: 22px;

    &.open{
      height: 42px;

      .arrow{
        svg{
          transform: rotate(180deg);
        }
      }
      
    }

    .input{
      font-size: 15px;
      outline: none;
      border: none;
      box-sizing: border-box;
      color: rgb(32 14 50);
      flex: 1;
      max-width: 200px;
      width: 0;

      // width: 100%;
      padding: 12px 10px;
      background: rgb(242 242 242);
      border-radius: 8px;
    }

    .submitBtn{
      width: 36px;
      height:36px;
      background: linear-gradient(to right,#ec008c,#fc6767);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      cursor: pointer;

      &.forbid{
        background: rgb(185 185 185);
        cursor: not-allowed;
        pointer-events: none;
        touch-action: none;
      }
    }
  }

  .mainItemBody{
    padding-top: 10px;
    flex: 1;

    .inner{
      position: relative;

      // height: 100%;
      padding-bottom: 60px;
    }

    &.hasNoAddBtn{
      .inner{
        padding-bottom: 0;
      }
    }
  }

  // .iconSelect{
  //   width: 20px;

  //   svg{
  //     width: 20px;
  //   }
  // }

  .hidden {
    opacity: 0;
  }
}
